<template>
	<view>
		<view class="dt">
			<view class="title">患者信息：</view>
			<view class="navs uniFlex">
				<view class="name">患者：</view>
				<view class="info">
					{{message.user.name}}
					<text v-if="message.user.sex == 1" class="sex">男</text>
					<text v-else class="sex">女</text>
					<text>{{message.user.nianling}}</text>
				</view>
			</view>
			<view class="navs uniFlex2">
				<view class="name">主诉：</view>
				<view>{{message.miaoshu}}</view>
			</view>
		</view>

		<view class="dt">
			<view class="title">诊断信息：</view>
			<view class="navs uniBtn2">
				<view class="name">中医诊断：</view>
				<view class="info2">
					<view class="uniFlex2">
						<textarea style="height: 200upx;" v-model="zhenduan" maxlength="-1" placeholder="请输入" placeholder-class="pcs2"></textarea>
					</view> 
				</view>
			</view>
			<view class="navs uniBtn">
				<view class="name">智能开方：</view>
				<view class="info2">
					<view class="uniFlex">
						<input style="width: 320upx;" v-model="keys" placeholder="请输入智能开方关键词" placeholder-class="pcs2" type="text">
						<view class="fast" @click="fast()">立即前往</view>
					</view> 
				</view>
			</view>
			<view class="navs navsAdd" @click="adds">+ 添加药材</view>
			
			<view v-if="datas.length>0" class="navs uniFlex2">
				<view class="name">药材：</view>
				<view><text v-for="i in datas">{{i.value}};</text></view>
			</view>
			
			<view class="title">用法用量：</view>
			<view class="navs uniBtn">
				<view class="name" style="font-weight: bold;">方剂类型：</view>
				<view class="info2">
					<picker @change="bindPickerChange" :value="index" :range="array" range-key="title">
						<view class="uniEnd">
							<view class="pcs" v-if="!arrayId1">请选择</view>
							<view v-else style="font-weight: bold;color: red;">{{arrayName1}}</view>
							<img src="../../static/bg/icons.png" alt="">
						</view>
					</picker>
				</view>
			</view>
			
			<view class="navs uniBtn">
				<view class="name">用法：</view>
				<view class="info2">
					<label class="radio">
						<radio @click="radios(0)" value="0" :checked="yongfa === 0" /><text style="margin-right: 20upx;">内服</text>
						<radio @click="radios(1)" value="1" :checked="yongfa === 1" /><text>外用</text>
					</label>
				</view>
			</view>
			<view class="navs uniBtn">
				<view class="name">煎出量：</view>
				<view class="info2">
					<label class="radio">
						<radio @click="radios2(180)" value="0" :checked="jianchu === 180" /><text style="margin-right: 20upx;">180ml</text>
						<radio @click="radios2(80)" value="1" :checked="jianchu === 80" /><text>80ml</text>
					</label>
				</view>
			</view>
			
			<view class="navs uniBtn2">
				<view class="name">剂量：</view>
				<view class="info2">
					<view class="uniFlex2" style="white-space: nowrap;">
						<text>共</text>
						<input class="input2" @input="onInput1" @blur="leaveInput" v-model="num1" type="number" placeholder-class="pcs2">
						<text>剂,每日</text>
						<input class="input2" @input="onInput2" @blur="leaveInput" v-model="num2" type="number" placeholder-class="pcs2">
						<text>剂,1剂分</text>
						<input class="input2" @input="onInput3" @blur="leaveInput" v-model="num3" type="number" placeholder-class="pcs2">
						<text>次服</text>
					</view>
				</view>
			</view>
			<view class="navs uniBtn2">
				<view class="name">医嘱：</view>
				<view class="info2">
					<view class="uniFlex2">
						<textarea style="height: 200upx;" v-model="yizhu" maxlength="-1" placeholder="请输入" placeholder-class="pcs2"></textarea>
					</view>
				</view>
			</view>
		</view>
		
		<view class="dt" @click="goOutside">
			<view class="navs uniBtn2">
				<view class="name"><text style="font-weight: bold;">外治法</text>(选填)：</view>
				<view class="info2">
					<view class="uniFlex2">
						<view style="width: 400upx;" v-if="outsideId">{{outsideStr}}</view>
						<view class="pcs2" style="width: 400upx;" v-else>请前往...</view>
						<img src="../../static/bg/icons.png" alt="">
					</view> 
				</view>
			</view>
		</view>
		
		<view class="dt">
			<view class="navs uniBtn2">
				<view class="name" style="white-space: nowrap;">费用：</view>
				<view class="info2">
					<view class="uniFlex2">
						<input type="number" v-model="num4" disabled placeholder="自动计算费用" placeholder-class="pcs2">
					</view>
				</view>
			</view>
			<view class="navs uniBtn2">
				<view class="name" style="white-space: nowrap;">附加费用：</view>
				<view class="info2">
					<view class="uniFlex2">
						<input type="number" @input="onInput5" @blur="leaveInput" v-model="num5" placeholder="请输入" placeholder-class="pcs2">
					</view>
				</view>
			</view>
		</view>
		
		<view class="dt" style="padding: 1upx 30upx;">
			<view class="navs uniBtn">
				<view class="name" style="font-weight: bold;">支付方式：</view>
				<view class="info2">
					<picker @change="bindPickerChange2" :value="index2" :range="array2" range-key="title">
						<view class="uniEnd">
							<view>{{array2[index2].title}}</view>
							<img src="../../static/bg/icons.png" alt="">
						</view>
					</picker>
				</view>
			</view>
		</view>
		
		<view v-if="index2 == 0" class="btnStyle" @click="submit">发送给患者</view>
		<view v-else class="btnStyle" @click="submit">下一步</view>
		<view style="height: 35upx;"></view>
	</view>
</template>

<script>
	import {get_jixing,yaopinjiage,kaifang} from '@/request/api.js';
	import commonUtil from "../../components/utils/format.js";
	export default {
		data() {
			return {
				paytype:'',//等于1  只能选择医生代付
				message: {
					miaoshu:'',
					user: {
						id: "",
						name: "",
						nianling: "",
						sex: ""
					}
				},
				zhenduan:'',//诊断
				keys:'',//智能开方
				array: [
					// {id:'a',title:'胃溃疡'},
					// {id:'b',title:'胎漏'},
					// {id:'c',title:'经至低热'},
				],
				index: -1,
				arrayId1:'',//rp id
				arrayName1:'',
				yongfa:0,//用法
				jianchu:180,//煎出量
				num1:7,
				num2:1,
				num3:2,
				yizhu:'',//医嘱
				num4:'',
				num5:'',
				datas:[],
				
				array2: [
					{id:'134',title:'用户支付'},
					{id:'136',title:'医生代付'},
					{id:'140',title:'门诊代付'},
				],
				index2: 2,
				arrayId2:140,
				outsideId:'',//生成的外治法id
				outsideStr:''//外治法内容
			}
		},
		onLoad(options) {
			this.message = JSON.parse(JSON.parse(options.query).items)
			this.paytype = JSON.parse(JSON.parse(options.query).paytype)
			// console.log(this.paytype)
			this.getType()
		},
		onShow() {
			// this.keys = ''
			this.getPrice()
		},
		methods: {
			// 外治法
			goOutside(){
				uni.navigateTo({
					url:'/pages/outside/outside?oid='+this.outsideId
				})
			},
			getType(){
				get_jixing({cid:uni.getStorageSync('companyId')}).then(res=>{
					this.array = res.data
					res.data.forEach(item=>{
						if(item.id == 6){
							this.arrayId1 = item.id
							this.arrayName1 = item.title
						}
					})
				})
			},
			bindPickerChange(e) {
				this.index = e.target.value
				this.arrayId1 = this.array[e.target.value].id
				this.arrayName1 = this.array[e.target.value].title
				this.getPrice()
			},
			radios(num){
				this.yongfa = num
			},
			radios2(num){
				this.jianchu = num
			},
			// 监听
			onInput1(e) {
				let num1 = commonUtil.formatNum2(e.detail.value)
				this.$nextTick(() => {
					this.num1 = num1
				})
			},
			// 监听
			onInput2(e) {
				let num2 = commonUtil.formatNum2(e.detail.value)
				this.$nextTick(() => {
					this.num2 = num2
				})
			},
			// 监听
			onInput3(e) {
				let num3 = commonUtil.formatNum2(e.detail.value)
				this.$nextTick(() => {
					this.num3 = num3
				})
			},
			// 失去焦点触发
			leaveInput(){
				this.getPrice()
			},
			// 计算价格
			getPrice(){
				// console.log(this.num1)
				// console.log(this.num2)
				// console.log(this.num3)
				// console.log(this.num5)
				console.log('计算价格')
				if(!this.num1){
					this.num1 = 7
				}
				if(!this.num2){
					this.num2 = 1
				}
				if(!this.num3){
					this.num3 = 2
				}
				let num5 = 0
				if(this.num5){
					num5 = this.num5
				}
				if(this.datas.length == 0){
					return
				}
				let param = {
					company_id:uni.getStorageSync('companyId'),
					list:JSON.stringify(this.datas),
					jishu:this.num1,
					meiri:this.num2,
					jifen:this.num3,
					type:this.arrayId1,
					fjf:num5,
				}
				yaopinjiage(param).then(res=>{
					this.num4 = res.data.zong
				})
			},
			// 添加药材
			adds(){
				if(this.datas.length > 0){
					uni.setStorageSync('drugs',this.datas)
				}else{
					uni.setStorageSync('drugs','')
				}
				uni.navigateTo({
					url:'/pages/prescription/search2'
				})
			},
			// 智能开方
			fast(){
				if(!this.keys){
					uni.showToast({
						title:'请先输入关键词',
						icon:'none'
					})
					return
				}
				uni.navigateTo({
					url:'/pages/prescription/prescription2?name='+this.keys
				})
			},
			// 监听
			onInput5(e) {
				let num5 = commonUtil.formatNum(e.detail.value)
				this.$nextTick(() => {
					this.num5 = num5
				})
			},
			// 支付方式
			bindPickerChange2(e) {
				if(this.paytype == 1){
					if(e.target.value == 0){
						uni.showToast({
							title: '快捷开方不能选择用户支付',
							icon: "none"
						})
						return
					}
				}
				this.index2 = e.target.value
				this.arrayId2 = this.array2[e.target.value].id
			},
			submit(){
				// if(!this.zhenduan) {
				// 	uni.showToast({
				// 		title: '请输入诊断结果',
				// 		icon: "none"
				// 	})
				// 	return
				// }
				if(!this.datas.length) {
					uni.showToast({
						title: '请选择药材',
						icon: "none"
					})
					return
				}
				// if(!this.yizhu) {
				// 	uni.showToast({
				// 		title: '请输入医嘱',
				// 		icon: "none"
				// 	})
				// 	return
				// }
				let param = {
					company_id:uni.getStorageSync('companyId'),
					jishu:this.num1,
					meiri:this.num2,
					jifen:this.num3,
					fjf:this.num5,
					zhenduan:this.zhenduan,
					rp:this.arrayId1,
					type:this.arrayId1,
					yongfa:this.yongfa,
					meici:this.jianchu,
					yizhu:this.yizhu,
					price:this.num4,
					list:JSON.stringify(this.datas),
					gid:this.message.id,
					pay_type:this.arrayId2,
					wzfid:this.outsideId
				}
				kaifang(param).then(res=>{
					uni.setStorageSync('outsideMsg','')//清空外治法
					if(this.index2 == 0){
						uni.showToast({
							title: '操作成功',
							icon: "none"
						})
						setTimeout(function(){
							uni.reLaunch({
								url:'/pages/index/index'
							})
						},800)
					}else{
						uni.navigateTo({
							url:'/pages/meet/pay?oid='+res.data.oid+'&active='+this.arrayId2
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	page {
		background: #f8f8f8;
	}

	.dt {
		background: #ffffff;
		padding:20upx 30upx;
		font-size: 30upx;
		margin-bottom: 30upx;

		.title {
			font-size: 32upx;
			font-weight: bold;
		}
		.navs{
			margin: 30upx 0;
			
			.name{
				width: 140upx;
				flex-shrink: 0;
				white-space: nowrap;
				color: #007AFF;
			}
			
			.info {
				flex: 1;
				font-size: 28upx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #414141;
						
				text {
					font-weight: 200;
				}
						
				.sex {
					padding: 0 24upx;
					margin: 0 24upx;
					border-left: 2upx solid #CCCCCC;
					border-right: 2upx solid #CCCCCC;
				}
			}
			.info2{
				display: flex;
				justify-content: flex-end;
				align-items: center;
				text-align: right;
				
				input,picker,textarea{
					width: 460upx;
				}
				img{
					width: 45upx;
					height:45upx;
					margin-left: 15upx;
				}
				.input2{
					width: 80upx;
					border-bottom: 1px solid #CCCCCC;
					text-align: center;
				}
				.fast{
					margin-left: 30upx;
					background: #F86C53;
					border-radius: 45upx;
					padding: 10upx 30upx;
					font-size: 28upx;
					color: #ffffff;
				}
			}
		}
		.navsAdd{
			text-align: center;
			border: 1px dashed #F86C53;
			border-radius: 40upx;
			padding: 15upx 45upx;
			color: #F86C53;
			background: #FFF2F7;
			width: 260upx;
			margin:45upx auto;
		}
	}
</style>
